#{extends 'main.html' /}
#{set title:'Home' /}
#{set 'moreStyles'}
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/mainPages.css'}">
<link rel = "stylesheet" media = "screen" href = "@{'/public/stylesheets/myTripGmap.css'}">
#{/set}
<div class="mainContent">
<div id="succecsMessage">
      <span></span> 
 </div>
<div id ="mapContent" style ="width :370px; height:460px; background:red">
    
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
<div id="cityContent">
	<div id="searchCityInput">
		<input id="searchTextField" type="search" size="50" placeholder="Anything you want!"/>
	</div>
    <div id="citySearch">	
	   <div id="relatedPlacesFilter">
      	Filter
      	<input type="text" id="filterTextBox" name="FilterTextBox"/>
      </div>
	    <div id="relatedPlacesList">
		 <h3>Other Places Of This City</h3>
		  #{list items:places, as:'place'}
                 			
                          <li class="onePlace" id="${place.getId()}"
                           lat="${place.getPlaceInfo().getCordinate().getLatitude()}" lgt = "${place.getPlaceInfo().getCordinate().getLongitude()}"><span>${place.getPlaceInfo().getFormatted_placeName()}</span></li>
                                
             #{/list}
      </div>
      <div id="relatedPlacesSelects" style="display:none">
      	<select >
      		<option selected="selected" value="3">Eat</option>
      		<option value="4">Stay</option>
      		<option value="5">See</option>
      	</select>
      </div>
      
    </div>
</div>
<div style="height:400px; width:300px"></div>
</div>
#{set 'moreScripts'} 


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBt7zoJK9vf2W3n1WxbXl5IyqYeCqadZzM&sensor=true"></script>
<script src ="@{'/public/javascripts/json2.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/ApplicationConstants.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/applicationRequest.js'}"  type = "text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$appRequest.addPlaceCityId=${cityId}	
</script>
<script src ="@{'/public/javascripts/gmapUtil.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/CityPlaceSelect.js'}"  type = "text/javascript" charset="utf-8"></script>

<script type="text/javascript"  charset = "utf-8">
$(document).ready(function(){
	$("#relatedPlacesList li").each(function() {
	  var t=$(this).text().toLowerCase();
	  alert(t);	
	});
	$("#filterTextBox").keyup(function() {
		var s=$(this).val().toLowerCase().split(" ");
		$("#relatedPlacesList li:hidden").show();
		$.each(s, function() {
		  $("#relatedPlacesList li:visible :not(:contains('"+this+"'))").parent().hide();
		});
	});
})
 
</script>

#{/set} 